import './index.scss'
import type { FormProps } from 'antd';
import { Button, Form, Input,message } from 'antd';
import {getLogin} from '../../request/api'
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
  console.log('Success:', values);
  getLogin(values).then(res=>{
    console.log(res,'登录接口')
    let {data:{code,token,image,name,userid}}=res
    if(code==200){
        localStorage.setItem('token',token)
        localStorage.setItem('image',image)
        localStorage.setItem('name',name)
        localStorage.setItem('userid',userid)
        message.success('登录成功',1.5,()=>{
            window.location.href = '/home'
        })
    }else{
        message.error('登录失败',1.5)
    }
  })
};

const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const Login=({onClose})=>{
    return (
        <div className="login">
            <div className='login_tu'>
                <div className='login_top'>
                    <img src='../src/assets/images/2.png' alt='' />
                    <div className='back' onClick={onClose}>X</div>
                   
                </div>
                 <div className='login_midon'>
                     <p>手机号登录</p>
                    <div className='form'>
                       
                        <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            style={{ maxWidth: 450 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                            label="手机号"
                            name="username"
                            rules={[{ required: true, message: '请输入手机号!' },{pattern: /^1[3-9]\d{9}$/,message: '请输入有效的手机号！'}]}
                            >
                            <Input />
                            </Form.Item>

                            <Form.Item<FieldType>
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' },{pattern:/^[1-8]\d{8}/,message:"请输入有效密码"}]}
                            >
                            <Input.Password />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit" style={{width:'300px'}}>
                                登录
                            </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>

                <div className='login_bottom'>
                    <p>-------------- 其他方式登录 --------------</p>
                    <div className='tubiao'>
                        <div>
                            <dl>
                                <dt><div className='iconfont icon-weixin'></div></dt>
                                <dd className='zi'>微信登录</dd>
                            </dl>
                        </div>
                        <div>
                            <dl>
                                <dt><div className='iconfont icon-QQ'></div></dt>
                                <dd className='zi'>QQ登录</dd>
                            </dl>
                        </div>
                    </div>
                    <div className='dibu'>
                        <p>注册或点击登录代表您同意《包图网网络服务使用协议》</p>
                    </div>
                </div>

            </div>
        </div>
    ) 
}

export default Login